<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>


	<meta content="width=device-width, initial-scale=1.0" name="viewport" />

	<meta content="" name="description" />

	<meta content="" name="author" />

	<!-- BEGIN GLOBAL MANDATORY STYLES -->

	<link href="media/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>

	<link href="media/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css"/>

	<link href="media/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>

	<link href="media/css/style-metro.css" rel="stylesheet" type="text/css"/>

	<link href="media/css/style.css" rel="stylesheet" type="text/css"/>

	<link href="media/css/style-responsive.css" rel="stylesheet" type="text/css"/>

	<link href="media/css/default.css" rel="stylesheet" type="text/css" id="style_color"/>

	<link href="media/css/uniform.default.css" rel="stylesheet" type="text/css"/>

	<!-- END GLOBAL MANDATORY STYLES -->

	<!-- BEGIN PAGE LEVEL STYLES --> 

	<link href="media/css/jquery.gritter.css" rel="stylesheet" type="text/css"/>

	<link href="media/css/daterangepicker.css" rel="stylesheet" type="text/css" />

	<link href="media/css/fullcalendar.css" rel="stylesheet" type="text/css"/>

	<link href="media/css/jqvmap.css" rel="stylesheet" type="text/css" media="screen"/>

	<link href="media/css/jquery.easy-pie-chart.css" rel="stylesheet" type="text/css" media="screen"/>

	<!-- END PAGE LEVEL STYLES -->

	<link rel="shortcut icon" href="media/image/favicon.ico" />
	
	
	
		
<link rel="stylesheet" href="../layui/css/layui.css"  media="all">	
<script type="text/javascript" src="../axios/vue.js"></script>
<script type="text/javascript" src="../axios/axios.min.js"></script>
<script type="text/javascript" src="../axios/qs.js"></script>
<script type="text/javascript" src="../axios/getUrlParams.js"></script>
<script type="text/javascript" src="../layer/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="../layer/layer.js"></script>
	
</head>
<body>
<div class="page-content">

			<!-- BEGIN SAMPLE PORTLET CONFIGURATION MODAL FORM-->

			<div id="portlet-config" class="modal hide">

				<div class="modal-header">

					<button data-dismiss="modal" class="close" type="button"></button>

					<h3>portlet Settings</h3>

				</div>

				<div class="modal-body">


				</div>

			</div>

			<!-- END SAMPLE PORTLET CONFIGURATION MODAL FORM-->

			<!-- BEGIN PAGE CONTAINER-->

			<div class="container-fluid">

				<!-- BEGIN PAGE HEADER-->   

				<div class="row-fluid">

					<div class="span12">

						<!-- BEGIN STYLE CUSTOMIZER -->

						

						<!-- END BEGIN STYLE CUSTOMIZER -->     

						<h3 class="page-title">


						</h3>

						<ul class="breadcrumb">

							<li>

								<i class="icon-home"></i>

								<a href="index.html">首页</a> 

								<span class="icon-angle-right"></span>

							</li>

							<li>

								<a href="#">修改密码</a>

							</li>


						</ul>

					</div>

				</div>

				<!-- END PAGE HEADER-->

				<!-- BEGIN PAGE CONTENT-->



				<div class="row-fluid" id="app">

					<div class="span12">

						<!-- BEGIN VALIDATION STATES-->

						<div class="portlet box green">

							<div class="portlet-title">

								<div class="caption"><i class="icon-reorder"></i>修改密码</div>


							</div>

							<div class="portlet-body form">

								<!-- BEGIN FORM-->


								<form action="#" id="form_sample_2" class="form-horizontal">

									<div class="alert alert-error hide">

										<button class="close" data-dismiss="alert"></button>

										You have some form errors. Please check below.

									</div>
									


									<div class="control-group">

										<label class="control-label">旧密码<span class="required">*</span></label>

										<div class="controls">

											<input type="password" v-model="userpwd"   data-required="1" class="span6 m-wrap"/>

										</div>

									</div>

									<div class="control-group">

										<label class="control-label">新密码<span class="required">*</span></label>

										<div class="controls">

											<input v-model="nuserpassword"  type="password" class="span6 m-wrap"/>

										</div>

									</div>
									
									
									<div class="control-group">

										<label class="control-label">确认密码<span class="required">*</span></label>

										<div class="controls">

											<input v-model="ruserpassword"  type="password" class="span6 m-wrap"/>

										</div>

									</div>
									
									

									

									<div class="form-actions">

										<a type="submit" @click="edit()" class="btn green">保存</a>

										<a type="button" @click="clean()"  class="btn">清除</a>

									</div>

								</form>

								<!-- END FORM-->

							</div>

						</div>

						<!-- END VALIDATION STATES-->

					</div>

				</div>

				<!-- END PAGE CONTENT-->         

			</div>

			<!-- END PAGE CONTAINER-->

		</div>
</body>
<script src="../layui/layui.js" charset="utf-8"></script>
<script type="text/javascript">
var qs = Qs
var vm = new Vue({
	  el:"#app",
	  data:{
		userpwd:"",
		nuserpassword:"",
		ruserpassword:"",
	  },
	  
	  methods:{
		
		  edit(){
			  if(this.userpwd==""){
				  layer.msg('旧密码不能为空',{icon:5})
				  return false;
			  }
			  
			  if(this.nuserpassword==""){
			  layer.msg('新密码不能为空',{icon:5})
			  return false;
		  }
			  
			  if(this.ruserpassword==""){
			  layer.msg('确认密码不能为空',{icon:5})
			  return false;
		  }
			  
				if(this.ruserpassword!=""&&this.nuserpassword!=""&&this.nuserpassword!=this.ruserpassword){
			  layer.msg('确认密码输入错误',{icon:5})
			  return false;
		  }
			  
			  axios.post('passwordedit',qs.stringify({
				userpwd:this.userpwd,
				nuserpassword:this.nuserpassword,
			  })).then(response =>{
				  if(response.data.data==400){
					  layer.msg("旧密码输入错误，请重试",{icon:5})
				  }else{
					layer.msg("修改成功",{icon:6})
				  }
			  }).catch(error =>{
				  console.log(error)
			  })
		  },
		  
		
		clear_input(){
			this.userpassword=""
				this.ruserpassword=""
					this.nuserpassword=""
		} 
		  
	  }
})
</script>

</html>